<template>
	<view class="page">
	  <view class="group_1">
	    <view class="box_1">
	      <view class="box_2">
	        <view class="section_1">
	          <view class="box_3"></view>
	          <view class="box_4">
	            <text lines="1" class="text_1">联通星圣卡</text>
	            <view class="text-wrapper_1">
	              <text lines="1" class="text_2">长期秒返</text>
	            </view>
	          </view>
	          <view class="box_5">
	            <text lines="1" class="text_3">29</text>
	            <text lines="1" class="text_4">元/月</text>
	            <text lines="1" class="text_5">135</text>
	            <view class="text-wrapper_2">
	              <text lines="1" class="text_6">GB</text>
	              <text lines="1" class="text_7">/月</text>
	            </view>
	            <text lines="1" class="text_8">100</text>
	            <text lines="1" class="text_9">分钟/月</text>
	          </view>
	          <view class="text-wrapper_3">
	            <text lines="1" class="text_10">优惠月租</text>
	            <text lines="1" class="text_11">国内流量</text>
	            <text lines="1" class="text_12">语音通话</text>
	          </view>
	          <view class="text-wrapper_4">
	            <text lines="1" class="text_13">预计佣金：</text>
	            <text lines="1" class="text_14">316</text>
	            <text lines="1" class="text_15">元</text>
	          </view>
	          <view class="box_6">
	            <view class="image-text_1">
	              <image src="/static/haokatuiguang2/a.png" class="label_1"></image>
	              <text lines="1" class="text-group_1">立即推广</text>
	            </view>
	          </view>
	        </view>
	        <view class="image-wrapper_1">
	          <image src="/static/haokatuiguang2/b.png" class="image_1"></image>
	        </view>
	      </view>
	    </view>
	  </view>
	</view>
</template>

<script>
</script>

<style>
	.page {
	  position: relative;
	  width: 750rpx;
	  height: 2000rpx;
	  overflow: hidden;
	  display: flex;
	  flex-direction: column;
	}
	.group_1 {
	  height: 2000rpx;
	  background: url(/static/haokatuiguang2/c.png) 100% no-repeat;
	  background-size: 100% 100%;
	  display: flex;
	  flex-direction: column;
	  width: 750rpx;
	}
	.box_1 {
	  height: 2000rpx;
	  background: url(/static/haokatuiguang2/d.png) 100% no-repeat;
	  background-size: 100% 100%;
	  display: flex;
	  flex-direction: column;
	  width: 750rpx;
	}
	.box_2 {
	  background-color: rgba(0,0,0,0.630000);
	  width: 750rpx;
	  height: 2000rpx;
	  display: flex;
	  flex-direction: column;
	}
	.section_1 {
	  background-image: linear-gradient(79deg, rgba(220,234,252,1.000000) 0, rgba(220,234,252,1.000000) 0, rgba(255,255,255,1.000000) 100.000000%, rgba(255,255,255,1.000000) 100.000000%);
	  border-radius: 20rpx;
	  width: 600rpx;
	  height: 891rpx;
	  display: flex;
	  flex-direction: column;
	  margin: 453rpx 0 0 75rpx;
	}
	.box_3 {
	  background-color: rgba(31,86,245,1.000000);
	  border-radius: 20rpx;
	  width: 521rpx;
	  height: 521rpx;
	  display: flex;
	  flex-direction: column;
	  margin: 40rpx 0 0 40rpx;
	}
	.box_4 {
	  width: 334rpx;
	  height: 40rpx;
	  flex-direction: row;
	  display: flex;
	  justify-content: space-between;
	  margin: 25rpx 0 0 59rpx;
	}
	.text_1 {
	  width: 186rpx;
	  height: 35rpx;
	  overflow-wrap: break-word;
	  color: rgba(51,51,51,1);
	  font-size: 36rpx;
	  font-family: SourceHanSansCN-Bold;
	  font-weight: 700;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 292rpx;
	}
	.text-wrapper_1 {
	  border-radius: 10rpx;
	  height: 40rpx;
	  border: 1px solid rgba(255,85,39,1);
	  display: flex;
	  flex-direction: column;
	  width: 130rpx;
	}
	.text_2 {
	  width: 106rpx;
	  height: 25rpx;
	  overflow-wrap: break-word;
	  color: rgba(255,85,39,1);
	  font-size: 26rpx;
	  font-family: SourceHanSansCN-Normal;
	  font-weight: normal;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 358rpx;
	  margin: 8rpx 0 0 12rpx;
	}
	.box_5 {
	  width: 397rpx;
	  height: 25rpx;
	  flex-direction: row;
	  display: flex;
	  margin: 24rpx 0 0 65rpx;
	}
	.text_3 {
	  width: 35rpx;
	  height: 25rpx;
	  overflow-wrap: break-word;
	  color: rgba(255,85,39,1);
	  font-size: 30rpx;
	  font-family: STHeitiSC-Medium;
	  font-weight: 500;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 292rpx;
	}
	.text_4 {
	  width: 45rpx;
	  height: 20rpx;
	  overflow-wrap: break-word;
	  color: rgba(102,102,102,1);
	  font-size: 20rpx;
	  font-family: STHeitiSC-Medium;
	  font-weight: 500;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 292rpx;
	  margin: 5rpx 0 0 4rpx;
	}
	.text_5 {
	  width: 50rpx;
	  height: 24rpx;
	  overflow-wrap: break-word;
	  color: rgba(255,85,39,1);
	  font-size: 30rpx;
	  font-family: STHeitiSC-Medium;
	  font-weight: 500;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 292rpx;
	  margin-left: 54rpx;
	}
	.text-wrapper_2 {
	  width: 54rpx;
	  height: 20rpx;
	  overflow-wrap: break-word;
	  font-size: 0rpx;
	  font-family: ArialMT;
	  font-weight: normal;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 292rpx;
	  margin: 5rpx 0 0 6rpx;
	}
	.text_6 {
	  width: 54rpx;
	  height: 20rpx;
	  overflow-wrap: break-word;
	  color: rgba(102, 102, 102, 1);
	  font-size: 20rpx;
	  font-family: ArialMT;
	  font-weight: normal;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 292rpx;
	}
	.text_7 {
	  width: 54rpx;
	  height: 20rpx;
	  overflow-wrap: break-word;
	  color: rgba(102, 102, 102, 1);
	  font-size: 20rpx;
	  font-family: STHeitiSC-Medium;
	  font-weight: 500;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 292rpx;
	}
	.text_8 {
	  width: 50rpx;
	  height: 24rpx;
	  overflow-wrap: break-word;
	  color: rgba(255,85,39,1);
	  font-size: 30rpx;
	  font-family: STHeitiSC-Medium;
	  font-weight: 500;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 292rpx;
	  margin-left: 30rpx;
	}
	.text_9 {
	  width: 65rpx;
	  height: 20rpx;
	  overflow-wrap: break-word;
	  color: rgba(102,102,102,1);
	  font-size: 20rpx;
	  font-family: STHeitiSC-Medium;
	  font-weight: 500;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 292rpx;
	  margin: 5rpx 0 0 4rpx;
	}
	.text-wrapper_3 {
	  width: 381rpx;
	  height: 22rpx;
	  flex-direction: row;
	  display: flex;
	  margin: 12rpx 0 0 66rpx;
	}
	.text_10 {
	  width: 86rpx;
	  height: 21rpx;
	  overflow-wrap: break-word;
	  color: rgba(102,102,102,1);
	  font-size: 22rpx;
	  font-family: SourceHanSansCN-Normal;
	  font-weight: normal;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 292rpx;
	  margin-top: 1rpx;
	}
	.text_11 {
	  width: 85rpx;
	  height: 21rpx;
	  overflow-wrap: break-word;
	  color: rgba(102,102,102,1);
	  font-size: 22rpx;
	  font-family: SourceHanSansCN-Normal;
	  font-weight: normal;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 292rpx;
	  margin: 1rpx 0 0 66rpx;
	}
	.text_12 {
	  width: 86rpx;
	  height: 22rpx;
	  overflow-wrap: break-word;
	  color: rgba(102,102,102,1);
	  font-size: 22rpx;
	  font-family: SourceHanSansCN-Normal;
	  font-weight: normal;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 292rpx;
	  margin-left: 58rpx;
	}
	.text-wrapper_4 {
	  width: 172rpx;
	  height: 21rpx;
	  flex-direction: row;
	  display: flex;
	  margin: 25rpx 0 0 64rpx;
	}
	.text_13 {
	  width: 85rpx;
	  height: 20rpx;
	  overflow-wrap: break-word;
	  color: rgba(102,102,102,1);
	  font-size: 20rpx;
	  font-family: Adobe Heiti Std R;
	  font-weight: normal;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 292rpx;
	  margin-top: 1rpx;
	}
	.text_14 {
	  width: 41rpx;
	  height: 20rpx;
	  overflow-wrap: break-word;
	  color: rgba(255,85,39,1);
	  font-size: 24rpx;
	  font-family: STHeitiSC-Medium;
	  font-weight: 500;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 292rpx;
	  margin-left: 21rpx;
	}
	.text_15 {
	  width: 19rpx;
	  height: 17rpx;
	  overflow-wrap: break-word;
	  color: rgba(102,102,102,1);
	  font-size: 20rpx;
	  font-family: STHeitiSC-Medium;
	  font-weight: 500;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 292rpx;
	  margin: 4rpx 0 0 6rpx;
	}
	.box_6 {
	  background-image: linear-gradient(79deg, rgba(250,82,85,1.000000) 0, rgba(250,82,85,1.000000) 0, rgba(249,192,137,1.000000) 100.000000%, rgba(249,192,137,1.000000) 100.000000%);
	  border-radius: 40rpx;
	  width: 515rpx;
	  height: 80rpx;
	  display: flex;
	  flex-direction: row;
	  margin: 29rpx 0 27rpx 43rpx;
	}
	.image-text_1 {
	  width: 165rpx;
	  height: 32rpx;
	  flex-direction: row;
	  display: flex;
	  justify-content: space-between;
	  margin: 21rpx 0 0 175rpx;
	}
	.label_1 {
	  width: 34rpx;
	  height: 31rpx;
	  margin-top: 1rpx;
	}
	.text-group_1 {
	  width: 117rpx;
	  height: 29rpx;
	  overflow-wrap: break-word;
	  color: rgba(255,255,255,1);
	  font-size: 30rpx;
	  font-family: STHeitiSC-Medium;
	  font-weight: 500;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 292rpx;
	}
	.image-wrapper_1 {
	  width: 750rpx;
	  height: 657rpx;
	  margin-bottom: 1rpx;
	  display: flex;
	  flex-direction: column;
	}
	.image_1 {
	  width: 78rpx;
	  height: 78rpx;
	  margin: 70rpx 0 0 337rpx;
	}
</style>